<script lang="js" setup>
import { Document, Menu as IconMenu, Location, Setting, Operation } from '@element-plus/icons-vue'
import { ElMenu, ElSubMenu, ElMenuItem } from 'element-plus'
import { onMounted, ref, defineProps, defineEmits } from 'vue'



// 接收父组件传递的数据(二级菜单)
const props = defineProps({
    f2List: {
        type: Array,
        default: () => []
    }
})

//传递组件名称给父组件控制显示内容
const emit = defineEmits(['cname'])
const selecedFunction1 = ref('0-0')

let activeIndex = JSON.parse(sessionStorage.getItem('activeIndex'))


//选中菜单项处理
const setActive = (fname, index, index1) => {
    sessionStorage.setItem('selectedFunction1', index + '-' + index1)
    selecedFunction1.value = index + '-' + index1
    //将内容组件名称参数传递给父组件
    emit('cname', fname)
    sessionStorage.setItem('selectedFunction1Name', fname)
}

// 监听折叠面板的展开和关闭事件
const handleOpen = (index) => {
    for (let i = 0; i < activeIndex.length; i++) {
        if (activeIndex[i] === index) {
            return
        }
    }
    activeIndex.push(index)
    console.log(activeIndex)

    sessionStorage.setItem('activeIndex', JSON.stringify(activeIndex))
};
const handleClose = (index) => {
    for (let i = 0; i < activeIndex.length; i++) {
        if (activeIndex[i] === index) {
            activeIndex.splice(i, 1)
            break
        }
    }

    sessionStorage.setItem('activeIndex', JSON.stringify(activeIndex))
}

onMounted(() => {
    //默认内容
    if (props.f2List) {
        console.log("f2List存在的！")
    }
    const selectedVal = sessionStorage.getItem('selectedFunction1')
    if (selectedVal !== null) {
        selecedFunction1.value = selectedVal
        const fname = sessionStorage.getItem('selectedFunction1Name')
        emit('cname', fname)
    }

    const savedActiveIndex = JSON.parse(sessionStorage.getItem('activeIndex'))
    if (savedActiveIndex !== null) {
        activeIndex = savedActiveIndex
    }
    console.log('页面恢复：')
    console.log(activeIndex)

})
</script>



<template>
    <div class="menu">
        <el-row>
            <el-col>
                <el-menu :default-openeds="activeIndex" @open="handleOpen" @close="handleClose"
                    style="border-right: none;position: relative;top: 1vw;">
                    <template v-for="(item, index) in props.f2List">

                        <template v-if="item.children !== null && item.children.length > 0">
                            <el-sub-menu :index="index">
                                <template #title>
                                    <div style="position: relative;left: 23%;">
                                        <el-icon :color="item.color">
                                            <component :is="item.icon"></component>
                                        </el-icon>
                                        <span>{{ item.name }}</span>
                                    </div>
                                </template>
                                <el-menu-item :class="{ 'seleced1': index + '-' + index1 === selecedFunction1 }"
                                    v-for="(child, index1) in item.children" :key="index"
                                    @click="setActive(child.fname, index, index1)">
                                    <span style="position: relative;left: 28%;">{{ child.name }}</span></el-menu-item>
                            </el-sub-menu>
                        </template>
                        <template v-else>
                            <el-menu-item :class="{ 'seleced1': index + '-' + 0 === selecedFunction1 }"
                                @click="setActive(item.fname, index, 0)">
                                <div style="position: relative;left: 20%;">
                                    <el-icon :color="item.color">
                                        <component :is="item.icon"></component>
                                    </el-icon>
                                    <span>{{ item.name }}</span>
                                </div>

                            </el-menu-item>
                        </template>
                    </template>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>


<style scoped lang="scss">
.menu {
    width: 220px;
    height: 100%;
    background: white;
    position: fixed;
    /* top: 110px;
    left: -20px; */
    border-radius: 10px;
    /* background: #b2d754; */
    /* z-index: 999; */
}

.seleced1 {
    color:$seleceted ;
    background-color: $selecetedbg;
    border-right: 1px solid $seleceted;
}
</style>
